<template>
  <div class="count-up" ref="refCountUp" id="count-up"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { CountUp } from "countup.js";

const props = defineProps({
  endVal: Number,
});

onMounted(() => {
  initCountUp();
});

const refCountUp = ref(null);
const initCountUp = () => {
  const countUp = new CountUp(refCountUp.value, props.endVal);
  countUp.start();
};
</script>

<script lang="ts">
export default {
  name: "CountUp",
};
</script>

<style lang="scss" scoped>
.count-up {
  display: inline;
}
</style>
